import React, { Component } from 'react'

export default class TabC extends Component {
  state = {
    list:[]
  }
  componentDidMount() {
    // const carNumber = this.createCarNumber()
    // console.log(carNumber);
    this.begin()
  }
  begin = () => {
    this.timmer = setInterval(() => {
      let temp = []
      for (let index = 0; index < 6; index++) {
        const carNumber = this.createCarNumber()
        temp.push(carNumber)
      }
      this.setState({
        list:temp
      })
    }, 300);

  }
  createCarNumber = () => {
    let array = []
    //产生三个数字
    for (let index = 0; index < 3; index++) {
      const num = Math.floor(Math.random() * 10)
      array.push(num)
    }
    //产生两个字母
    for (let index = 0; index < 2; index++) {
      const code = Math.floor(Math.random() * 26 + 65)
      const chat = String.fromCharCode(code)
      array.push(chat)
    }
    //打乱顺序 [1,3,2,A,B]
    //sort自定义排序规则。 1 0 -1来决定
    array.sort((a, b) => {
      return 0.5 - Math.random()
    })
    return "苏A" + array.join("")
  }
  pause = ()=>{
    if(this.timmer){
      clearInterval(this.timmer)
      this.timmer = null
    }else{
      this.begin()
    }
    
  }
  chooseCarNumber = (event)=>{
    const chooseResult = event.target.innerText
    console.log(chooseResult);
  }
  
  componentWillUnmount(){
    clearInterval(this.timmer)
  }
  render() {
    return (
      <div>
        <h2>选号</h2>
        <ul onClick={this.chooseCarNumber}>
          {this.state.list.map(item=>{
            return <li key={item}>{item}</li>
          })}
        </ul>
        <button onClick={this.pause}>暂停</button>
        <p>你选中的车牌为:</p>
      </div>
    )
  }
}
